<!DOCTYPE html>
<html>
<head>
    <title>top</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <style>

        /*导航栏样式*/
        body{
            font-size: 12px;
            font-family: Arial;
        }
        a{
            color: #999;
        }
        a:hover{
            color: #C40000;
            text-decoration: none;
        }
        .redColor{
            color: #C40000 !important;
        }
        nav.top{
            background-color: #f2f2f2;
            padding-bottom: 5px;
            padding-top: 5px;
            border-bottom: 1px solid  #e7e7e7;
        }
        nav.top span, nav.top a{
            color: #999;
            margin: 0 10px 0 10px;
        }

        /*搜索栏样式*/
        div.searchDiv{
            background-color: #C40000;
            width: 400px;
            margin: 50px auto;
            padding: 1px;
            height: 40px;
            display: block;
        }
        div.searchDiv input{
             width: 275px;
             border: 1px solid transparent;  /*边框设置成透明的，否则会有边框阴影*/
             height: 36px;
             margin: 1px;
             outline:none;  /*去掉输入框轮廓，否则获取焦点的时候会发生颜色变化*/
         }
        div.searchDiv button{
            width: 110px;   /*宽度110px,这样加上左边的input的275px的宽度，正好把searchDiv填满*/
            border: 1px solid transparent;
            background-color: #C40000; /*背景色设置成天猫红，和searchDiv融为一体*/
            color: white;
            font-size: 20px;
            font-weight: bold;
        }
        div.searchBelow{
            margin-top: 3px;
            margin-left: -20px;
        }
        div.searchBelow a{
            padding: 0px 20px 0px 20px;
            font-size: 14px;
        }
        img.logo{
            position: absolute;
            left: 0px;
            top: 30px;
            z-index:-1; /*-1表示放在下面，免得图片挡住了输入框*/
        }
    </style>
</head>

<body>
<nav class="top">
    <a href="#nowhere">
        <span class="glyphicon glyphicon-home redColor"></span>
        天猫首页
    </a>
    <span>喵，欢迎来天猫</span>
    <a href="#nowhere">请登陆</a>
    <a href="#nowhere">免费注册</a>
    <span class="pull-right">
        <a href="#nowhere">我的订单</a>
        <a href="#nowhere">
            <span class="glyphicon glyphicon-shopping-cart redColor"></span>
            购物车<strong>0</strong>件
        </a>
    </span>
</nav>

<div>
    <a href="#nowhere">
        <img class="logo" src="http://how2j.cn/tmall/img/site/logo.gif" id="logo">
    </a>
    <div class="searchDiv">
        <input type="text" placeholder="时尚男鞋  太阳镜" name="keyword" />
        <button type="submit" class="searchButton">搜索</button>
        <div class="searchBelow">
            <span><a href="#nowhere">平衡车</a>|</span>
            <span><a href="#nowhere">扫地机器人</a>|</span>
            <span><a href="#nowhere">原汁机</a>|</span>
            <span><a href="#nowhere">冰箱</a></span>
        </div>
    </div>
</div>
</body>
</html>
